<template>
  <div class="index">
    <Header></Header>
    <div class="main">
      <div class="banner" style="width: 100%">
        <el-carousel trigger="click" height="360px" arrow="never">
          <el-carousel-item v-for="(item,index) in imgList" :key="index">
            <div class="banner_div">
              <img :src="item.picAddress" style="width: 100%;height: 360px">
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="indexMain">

        <div class="section1 clearfix">
          <el-form ref="form"
                   :inline="true"
                   :model="formInline"
                   label-width="110px">

            <el-form-item label="应急预案类别：">
              <el-select v-model="formInline.planCategory">
                <el-option v-for='(item,index) in types' :label="item.name" :value="item.value"
                           :key='index'></el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="fr">
              <a class="indexSearch" @click='$router.push({name:"search",params:formInline})'><i
                class="el-icon-search"></i> 搜索</a>

            </el-form-item>
            <el-form-item label="关键字：" class="fr">
              <el-input v-model="formInline.companyEmergencyName" style="width:200px;"></el-input>
            </el-form-item>
          </el-form>
        </div>

        <div class="clearfix information_index" style="background: #fff">
          <div class="fl information_half">
            <div class="halfDiv_top clearfix"><h3 class="fl">应急预案统计</h3></div>
            <div id="chart" ref="chart"></div>
          </div>

          <div class="fr information_half">
            <div class="halfDiv_top clearfix"><h3 class="fl">风险信息统计</h3></div>
            <div class="bzImg_box">
              <div id="chart" ref="chart1"></div>
            </div>
          </div>
        </div>
        <div class="clearfix information_index">
          <div class="information_half" style="width: 100%">
            <div class="halfDiv_top clearfix"><h3 class="fl">操作流程</h3></div>
            <div class="bzImg_box" style="height: 450px;">
              <img src="../../../static/images/bz_img.png" style="height: 360px;">
            </div>
          </div>
        </div>
        <div class="clearfix information_index" v-if="flag">
          <div class="information_half" style="width: 100%">
            <div class="halfDiv_top clearfix"><h3 class="fl">评审专家</h3> <label class="fr" @click="next()"><img src="../../../static/images/next1.png" alt=""> 换一批</label></div>
            <div class="bzImg_box1" >
              <div v-for="(item,index) in halfList2" :key="index">
                <img :src="item.userImg?item.userImg:'../../../static/images/noimg.png'" alt="" style="width: 88px;height: 125px;border: 1px solid #eee">
                <h1>{{item.userName}}</h1>
                <p>{{item.title}}</p>
                <p>{{item.buess}}</p>
              </div>
            </div>
          </div>
        </div>
        <!-- <div class="clearfix information_index">
             <div class="fl information_half">
                 <div class="halfDiv_top clearfix"><span></span><h3 class="fl">应急资讯</h3><router-link :to="{path:'list',query:{name:'应急资讯'}}"  class="fr">更多&gt;</router-link></div>
                 <ul class="half_list">
                     <li v-for="(item,index) in halfList1" :key="index">
                         <router-link :to="{path:'listDetail',query:{id:item.id}}" :title="item.name">{{item.name}}</router-link>
                         <span>{{item.publishTime.split(' ')[0]}}</span>
                     </li>
                 </ul>
             </div>

             <div class="fr information_half">
                 <div class="halfDiv_top clearfix"><span></span><h3 class="fl">应急知识</h3><router-link :to="{path:'list',query:{name:'应急知识'}}" class="fr">更多&gt;</router-link></div>
                 <ul class="half_list">
                     <li v-for="(item,index) in halfList2" :key="index" class="clearfix">
                         <router-link :to="{path:'listDetail',query:{id:item.id}}" :title="item.name">{{item.name}}</router-link>
                         <span>{{item.publishTime.split(' ')[0]}}</span>
                     </li>
                 </ul>
             </div>
         </div>-->

        <!-- <div class="section3 modules_main">
          <h2 class="secTitle">企业信息录入管理</h2>
          <div class="modules_list clearfix">
            <el-col :span='8'
                    class="modules">
              <a @click="togochange('basic')"><img src="../../../static/images/basic_icon.png" />
                <p>基本信息</p>
              </a>
            </el-col>
            <el-col :span='8'
                    class="modules">
              <a @click="togochange('risk')" :class="changemsg>1?'':'selectmsg'"><img src="../../../static/images/risk_icon.png" />
                <p>风险信息</p>
              </a>
            </el-col>
            <el-col :span='8'
                    class="modules">
              <a  @click="togochange('resources')" :class="changemsg>=3?'':'selectmsg'"><img src="../../../static/images/resource_icon.png" />
                <p>应急资源信息</p>
              </a>
            </el-col>
          </div>
        </div> -->
        <!-- <div class="section4 modules_main">
          <h2 class="secTitle">企业应急预案管理</h2>
          <div class="modules_list clearfix">
            <el-col :span='8'
                    class="modules">
              <router-link to='estimate'><img src="../../../static/images/formation_icon.png" />
                <p>应急预案编制</p>
              </router-link>
            </el-col>
            <el-col :span='8'
                    class="modules">
              <router-link to='onlineAssess' ><img src="../../../static/images/assess_icon.png" />
                <p>应急预案评审</p>
              </router-link>
            </el-col>
            <el-col :span='8'
                    class="modules">
               <a   @click="showmsg"><img src="../../../static/images/revise_icon.png" />
                <p  >应急预案修订</p>
              </a>
            </el-col>
            <el-col :span='8'
						@click="showmsg"
                    class="modules">
              <router-link to='index'  @click.native="showmsg"><img src="../../../static/images/guide_icon.png" />
                <p  >应急预案备案指导</p>
              </router-link>
            </el-col>
            <el-col :span='8'
						@click="showmsg"
                    class="modules">
              <router-link to='index' @click.native="showmsg"><img src="../../../static/images/drill_icon.png" />
                <p  >应急预案培训演练</p>
              </router-link>
            </el-col>
            <el-col :span='8'
						@click="showmsg"
                    class="modules">
              <router-link to='index' @click.native="showmsg"><img src="../../../static/images/estimate_icon.png" />
                <p>应急能力评估</p>
              </router-link>
            </el-col>
          </div>
        </div> -->


        <el-dialog
          title="提示"
          :visible.sync="dialogVisible"
          width="300px"
        >
          <div style="text-align: center;font-size: 16px;height:10px;line-height:10px;">
            暂未开通
          </div>

        </el-dialog>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
  import config from "../../config.js";
  import Header from '../common/header'
  import Footer from '../common/footer1'

  export default {
    data() {
      return {
        formInline: {
          companyEmergencyName: "",
          planCategory: ""
        },
        activeIndex: 0,
        navList: [
          '应急动态', '应急知识', '应急处置卡'
        ],
        data: [],
        types: [
          {
            name: '全部',
            value: ''
          }, {
            name: '综合预案',
            value: '1'
          }, {
            name: '专项预案',
            value: '2'
          }, {
            name: '现场处置预案',
            value: '3'
          }
        ],
        dialogVisible: false,
        changemsg: 1,
        loginstate: 4,
        stepNote: true,
        imgList: [
          {src: '../../static/images/banner_01.png'},
          {src: '../../static/images/banner_02.png'}
        ],
        halfList1: [],
        halfList2: [],
        halfList3: [],
        specialList:[{"url":"../../../static/images/z1.png","name":"张义序","buess":"电力建设工程项目安全生产标准化评审员","title":"注册安全工程师"},
          {"url":"../../../static/images/z2.png","name":"张义序","buess":"电力建设工程项目安全生产标准化评审员","title":"注册安全工程师"},
          {"url":"../../../static/images/z3.png","name":"张义序","buess":"电力建设工程项目安全生产标准化评审员","title":"注册安全工程师"},
          {"url":"../../../static/images/z4.png","name":"张义序","buess":"电力建设工程项目安全生产标准化评审员","title":"注册安全工程师"},
          {"url":"../../../static/images/z5.png","name":"张义序","buess":"电力建设工程项目安全生产标准化评审员","title":"注册安全工程师"}],
        flag:false,
        index:1
      }
    },
    components: {
      Header,
      Footer
    },
    watch: {
      'activeIndex': function (newV, oldV) {
        this.getList(newV + 1)
      },
      '$store.state.loginstates': function (newVal) {
        this.loginstate = newVal;
      }
    },
    mounted() {

      if (localStorage.showFlag == 1) {
        this.$store.state.showflag1 = false
      } else {
        if (localStorage.showTime == 0) {
          this.$store.state.showflag1 = true
          localStorage.removeItem('showTime')
        }
      }
      //this.initCharts();
     // this.initCharts1()
      this.getimg()
      this.getChart1()
      //  this.getList(1)
      //  this.changemsg = this.$store.state.changestate;
      //  console.log(this.changemsg)
    },
    methods: {
      getimg() {
        this.$axios.post(config.baseUrl + 'emergency/v1.0/advertisement/list', {"type": "2"})
          .then((res) => {
            if (res.data.meta.success) {
              this.imgList = res.data.data
            } else {
              this.$message.warning(res.data.msg);
            }

          }).catch((response) => {
          console.log(response);
        })
      },
      getList1() {
        this.$axios.post(config.baseUrl + 'emergency/v1.0/infomation/list', {
          pageIndex: 1,
          pageSize: 3,
          type: '1'
        }).then((res) => {
          // console.log(res)
          if (res.data.meta.success) {
            this.halfList1 = res.data.data.records
          } else {

          }

        }).catch((response) => {
          console.log(response);
        })
      },
      getList2() {
        var arr=['2', '5', '6', '7', '8', '9', '11', '12', '13', '14', '15', '49', '50'];
        var buess=JSON.parse(localStorage.getItem('user')).fbusinessId;
        if(arr.indexOf(buess)>-1){
           this.flag=true
        }else{
          return
        }
        this.$axios.post(config.baseUrl + 'emergency/v1.0/special/users', {
          pageIndex: 1,
          pageSize: 500,
          businessId: buess,
        }).then((res) => {
          // console.log(res)
          if (res.data.meta.success) {
            this.halfList3 = res.data.data.records;
            if(this.halfList3.length>=5){
              this.halfList2=this.halfList3.slice(0,5)
            }else{
              this.halfList2=this.halfList3.slice(0,this.halfList3.length)
            }
          } else {

          }

        }).catch((response) => {
          console.log(response);
        })
      },
      next(){
        this.halfList2=[]
        var num=this.halfList3.length
        var num1=num%5
        var num2=parseInt(num/5)
        if(num<=5){
          this.halfList2=this.halfList3
          this.index=0
          return;
        }
        if(num2==this.index&&num1==0){
          this.halfList2=this.halfList3.slice(0,5)
          this.index=0
        }else if(num2==this.index&&num1!=0){
          this.halfList2=this.halfList3.slice(this.index*5,this.halfList3.length)
          this.index=0
        }else{
          this.halfList2=this.halfList3.slice(this.index*5,(this.index+1)*5)
          this.index=this.index+1
        }

      },
      getChart() {
        this.$axios.get(config.baseUrl + 'emergency/v1.0/plan/tj/' + JSON.parse(localStorage.getItem('user')).companyId)
          .then((res) => {
            console.log(res)
            if (res.data.meta.success) {
              var chartData = []
              res.data.data.map(item => {
                chartData.push({
                  value: item.planCount,
                  name: item.planName
                })
              })
              this.initCharts(chartData)
            } else {
              this.initCharts([{
                name: '综合应急预案', value: 0

              }, {name: '专项应急预案', value: 0}, {name: '现场处置方案', value: 0}])
            }

          }).catch((response) => {
          console.log(response);
        })
      },
      getChart1() {
        this.$axios.get(config.baseUrl + '/emergency/v1.0/company/risk/tj/' + JSON.parse(localStorage.getItem('user')).companyId)
          .then((res) => {
            if (res.data.meta.success) {
              var chartData = []
              var n1=[]
              var n2=[]
              res.data.data.map(item => {
               if(item.typeName!=null&&item.count!=null){
                  n1.push(item.typeName)
                  n2.push(item.count)
               }
              })
              this.initCharts1(n1,n2)
            } else {
              var n1= ['自然灾害类', '事故灾害类', '社会安全事件', '公共安全事件']
              var n2= [0, 0, 0, 0]
              this.initCharts1(n1,n2)
            }

          }).catch((response) => {
          console.log(response);
        })
      },
      initCharts(n) {
        let myChart = this.$echarts.init(this.$refs.chart);
        // 绘制图表
        myChart.setOption({
          title: {},
          legend: {
            orient: 'vertical',
            x: '0',
            y: '0',
            top:'-1%',
            textStyle: {
              color: '#333'
            }
          },
          tooltip: {
            trigger: 'item',
            // formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          color: ['#4a8fff', '#f22c34', '#f8ba34'],
          stillShowZeroSum: false,
          series: [
            {
              name: '应急预案统计',
              type: 'pie',
              radius: '70%',
              center: ['55%', '50%'],
              data: n
              // [{value: 23, name: '现场处置方案'},
              //     {value: 1, name: '综合应急预案'},
              //     {value: 13, name: '专项应急预案'}]
              ,
              label: {
                normal: {
                  formatter: '{b}:{c}个',
                  textStyle: {
                    color: '#333'
                  }
                }
              },
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(128, 128, 128, 0.5)'
                }
              }
            }
          ]
        })
        window.onresize = function () {
          myChart.resize();
        }
      },
      initCharts1(n1,n2) {
        let myChart = this.$echarts.init(this.$refs.chart1);
        // 绘制图表
        myChart.setOption({
          color: ['#3398DB'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data:n1,
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              type: 'bar',
              barWidth: '20%',
              data: n2
            }
          ]
        })
        window.onresize = function () {
          myChart.resize();
        }
      },
      getList(n) {
        this.$axios
          .get(config.baseUrl2 + "getContingencyPlanList?page=1&limit=6&type=" + n)
          .then(res => {

            if (res.data.code == 0) {
              this.data = res.data.page.list
              console.log(res.data.page.list)
            } else {
              this.$message.warning(res.data.msg);
            }
          })
          .catch(response => {
            console.log(response);
          });
      },
      showmsg() {
        this.dialogVisible = true;
      },
      lookstatus() {
        let params = {
          "companyId": JSON.parse(localStorage.getItem('user')).companyId
        }
        this.$axios
        ({
          method: 'post',
          url: this.$baseUrl + "emergency/v1.0/selected/risk",
          data: params
        }).then(
          (res) => {
            if (res.data.meta.success) {
              let arr = res.data.data.riskIds
              let brr = arr.split(",");
              let crr = [];
              brr.forEach(
                (item) => {
                  crr = [...crr, {riskId: item}]
                }
              )
              localStorage.newList = JSON.stringify(crr);
              this.changemsg = 4;
            } else {
              this.newmsg();
            }
          }
        )
      },
      newmsg() {
        let params = {
          "companyId": JSON.parse(localStorage.getItem('user')).companyId
        }
        this.$axios
        ({
          method: 'post',
          url: this.$baseUrl + "emergency/v1.0/company/info",
          data: params
        }).then(
          (res) => {
            let data = res.data.data;
            console.log(data);

            if (data.varEmergencyDept) {
              this.changeList = true;
              this.$store.state.changestate = 2;
              let arr = [];
              if (localStorage.getItem("newList")) {
                arr = JSON.parse(localStorage.getItem("newList"));
              }
              if (arr.length >= 2) {
                this.changemsg = 3;
              } else {
                this.changemsg = 2;
              }
            } else {
              this.changemsg = 1;
            }
          })
      },
      togochange(item) {
        if (item == "basic") {
          this.$router.push(item)
        } else if (item == "risk") {
          if (this.changemsg >= 2) {
            this.$router.push(item)
          } else {
            this.$message.warning("请填写公司信息");
          }
        } else if (item == "resources") {
          if (this.changemsg >= 3) {
            this.$router.push(item)
          } else {
            this.$message.warning("请录入风险信息");
          }
        }
      }
    },
    created() {
      this.lookstatus();
      this.getList1()
      this.getList2()
      this.getChart()
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less' scoped>
  .indexMain {
    margin: 0 auto;
    width: 1200px;
    .banner {
      height: 300px;
      text-align: center;
      margin-top: 25px;
      .banner_div {
        position: relative;
        img {
          height: 300px;
          width: 1920px;
          position: absolute;
          left: 50%;
          margin-left: -960px;
        }
      }
    }
    .section1 {
      background: #fff;
      padding: 9px 30px 12px;
      margin-top: 20px;
      display: flex;
      justify-content: center;
      .ml50 {
        margin-left: 50px;
      }
      .indexSearch {
        display: block;
        line-height: 36px;
        width: 79px;
        height: 36px;
        background: #4080ff;
       /* background: linear-gradient(left, #6fb2ff 0%, #095fff 100%);*/
        color: #fff;
        text-align: center;
        border: none;
        border-radius: 8px;
        margin-top: 3px;
        margin-left: 15px;
        cursor: pointer;
        > img {
          position: relative;
          top: -1px;
          margin-right: 3px;
        }
      }
      .indexSearch:hover {
        opacity: 0.8;
      }
    }
    .information_index {
      margin-top: 17px;
      .information_half {
        background: #fff;
        width: calc(50% - 20px);
        padding: 15px 30px 50px;
        #chart {
          height: 300px;
          width: 100%;
        }
        .bzImg_box {
          height: 300px;
          position: relative;
          img {
            width: 100%;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 0;
            right: 0;
            margin: 0 auto;
          }
        }
        .bzImg_box1 {
          display: flex;
          flex-direction: row;
          h1{
            margin-top: 5px;
            font-weight: bold;
            font-size: 16px;
            line-height: 20px;
          }
          p{
            font-size: 12px;
            color: #888;
            line-height: 20px;
          }
          div{
            width: 160px;
            padding: 0 10px;
            text-align: center;
            margin-right: 100px;
          }
          div:nth-child(5){
             margin-right: 0px;
           }

        }
        .halfDiv_top {
          margin-bottom: 20px;
          position: relative;
          span {
            background: #00a0e9;
            display: block;
            position: absolute;
            height: 16px;
            width: 4px;
            border-radius: 2px;
            left: -11px;
            top: 4px;
          }
          h3 {
            line-height: 24px;
            font-weight: bold;
            font-size: 16px;
          }
          a {
            color: #666;
            margin-top: 2px;
          }
        }
        .half_list {
          li {
            height: 36px;
            border-bottom: 1px dotted #ccc;
            line-height: 35px;
            a {
              display: block;
              float: left;
              max-width: calc(100% - 100px);
              cursor: pointer;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            &:hover a {
              text-decoration: underline;
              font-weight: bold;
            }
            span {
              color: #999;
              font-size: 12px;
              float: right;
              margin-right: 10px;
            }
          }
        }
      }
    }
    .modules_main {
      background: #fff;
      margin-top: 20px;
      padding: 25px 0 0;
      .secTitle {
        padding-left: 25px;
        font-size: 16px;
        font-weight: bold;
        color: #666;
        margin-bottom: 20px;
      }
      .modules_list {
        padding: 0 150px;
        .modules {
          text-align: center;
          margin-bottom: 30px;
          a {
            display: block;
            width: 130px;
            margin: 0 auto;
            img {
              margin-bottom: 12px;
            }
            p {
              font-size: 16px;
              color: #666;
            }
          }
          a:hover {
            opacity: 0.8;
          }
        }
      }
    }
    .section5 {
      background: #fff;
      margin-top: 20px;
      padding: 25px 0 50px;
      .secTitle {
        padding: 0 25px;
        font-size: 16px;
        font-weight: bold;
        color: #666;
        margin-bottom: 50px;
        .more {
          color: #7255e7;
          float: right;
          background: url("../../../static/images/more_icon.png") no-repeat right center;
          padding-right: 20px;
          font-size: 14px;
          font-weight: normal;
          margin-top: 2px;
        }
        .more:hover {
          opacity: 0.8;
        }
      }
      .resList {
        width: 550px;
        margin: 0 auto 50px;
        li {
          float: left;
          width: 100px;
          text-align: center;
          color: #666;
          cursor: pointer;
          position: relative;
          height: 30px;
          margin-right: 50px;
          > span {
            opacity: 0;
            position: absolute;
            display: block;
            width: 24px;
            height: 4px;
            border-radius: 2px;
            left: 50%;
            margin-left: -12px;
            bottom: 0;
            background: #009ff9;
          }
        }
        li:last-child {
          margin-right: 0;
        }
        li:hover,
        li.active {
          color: #009ff9;
          > span {
            opacity: 1;
          }
        }
      }
      .resCon {
        padding: 0 200px;
        .resCon_list {
          li {
            width: 50%;
            line-height: 42px;
            color: #666;
            float: left;
            a {
              display: block;
              position: relative;
              width: 80%;
              white-space: nowrap;
              margin: 0 auto;
              overflow: hidden;
              text-overflow: ellipsis;
              padding-left: 10px;
            }
            a:before {
              content: ".";
              position: absolute;
              color: #666;
              font-size: 26px;
              left: 0;
              top: -8px;
            }
            a:hover {
              color: #009ff9;
            }
          }
        }
      }
    }
  }

  .selectmsg {
    cursor: not-allowed;
  }
</style>
<style lang='less'>
  .stepDialog {
    .el-dialog__body {
      padding: 0;
    }
    .step {
      .stepImg {
        text-align: center;
        padding: 35px 0 45px;
      }
      .stepBottom {
        background: #f9f9f9;
        height: 70px;
        border-radius: 0 0 8px 8px;
        line-height: 70px;
        text-align: center;
        img {
          margin-right: 5px;
          position: relative;
          top: -1px;
        }
        a.noteBtn {
          cursor: pointer;
          color: #7254e6;
          display: inline-block;
          height: 36px;
          line-height: 36px;
          width: 96px;
          text-align: center;
          border: 1px solid #3f80fe;
          border-radius: 8px;
          margin-left: 15px;
        }
        a.noteBtn:hover {
          opacity: .8;
        }
      }
    }
  }
</style>
